export default {
  mounted(el, binding) {
    let firstTime = 0,
      lastTime = 0;
    el.onmousedown = (ev) => {
      // 鼠标按下的位置
      const mouseXStart = ev.clientX;
      const mouseYStart = ev.clientY;
      // 当前滑块位置
      const rectLeft = el.offsetLeft;
      const rectTop = el.offsetTop;
      firstTime = new Date().getTime();
      el.setAttribute('data-drag', false);
      document.onmousemove = (e) => {
        // 鼠标移动的位置
        const mouseXEnd = e.clientX;
        const mouseYEnd = e.clientY;
        const moveX = mouseXEnd - mouseXStart + rectLeft;
        const moveY = mouseYEnd - mouseYStart + rectTop;
        el.style['top'] = moveY + 'px';
        el.style['left'] = moveX + 'px';
      };
      document.onmouseup = () => {
        // 取消事件
        document.onmousemove = null;
        const { top, left } = window.getComputedStyle(el);
        const position = [top, left].join(',');
        localStorage.position = position;
        lastTime = new Date().getTime();
        binding.value.onEnd(position)
        if (lastTime - firstTime < 200) {
          el.setAttribute('data-drag', true);
        }
      };
    };
  },
};
